<template>
	<view class="category">
		<view
			class="add"
			@click="clickAdd"
		>
			<u-icon
				name="plus"
				color="#576b95"
				size="25"
			></u-icon>
		</view>
		<view
			class="row"
			v-for="(item, index) in categoryList"
			v-if="categoryList.length > 0"
		>
			<view class="left">
				<view class="name">{{ item.name }}</view>
				<view class="show_tag">
					<u-tag
						v-if="item.show"
						text="显示"
						size="mini"
						type="success"
					></u-tag>
				</view>
			</view>
			<view class="right">
				<view class="btn">
					<u-icon
						@click="updateData(item)"
						name="edit-pen"
						size="26"
						color="#576b95"
					></u-icon>
				</view>
				<view class="btn">
					<u-icon
						@click="deleteData(item._id)"
						name="trash"
						size="26"
						color="#ec544f"
					></u-icon>
				</view>
			</view>
		</view>
		<view
			class="empty"
			v-if="!categoryList.length"
		>
			<u-empty
				mode="data"
				icon="https://cdn.uviewui.com/uview/empty/data.png"
			></u-empty>
		</view>

		<u-popup
			:show="showPopup"
			mode="center"
			round="20"
			:closeable="true"
			:safe-area-inset-bottom="false"
			@close="closePopup"
		>
			<view class="categoryChangeForm">
				<u--form
					labelPosition="left"
					:model="categoryItem"
					:labelWidth="100"
					ref="uForm"
				>
					<view class="form-item">
						<u-form-item label="分类名">
							<u--input
								v-model="categoryItem.name"
								clearable
								placeholder="输入分类名称"
							></u--input>
						</u-form-item>
					</view>
					<view class="form-item">
						<u-form-item label="是否显示">
							<view class="switch">
								<u-switch
									v-model="categoryItem.show"
									size="22"
								></u-switch>
								<text>{{ categoryItem.show ? '显示' : '不显示' }}</text>
							</view>
						</u-form-item>
					</view>
					<view class="submit">
						<u-button
							type="primary"
							@click="dialogConfirm"
						>
							确认
						</u-button>
					</view>
				</u--form>
			</view>
		</u-popup>
	</view>
</template>

<script>
const db = uniCloud.database();
const categoryCloudObj = uniCloud.importObject('my-mall-category');
export default {
	data() {
		return {
			categoryList: [],
			categoryItem: {},
			updateId: null,
			showPopup: false
		};
	},
	onLoad() {
		this.isManage();
		this.getCategory();
	},
	methods: {
		// 获取分类数据
		async getCategory() {
			const res = await categoryCloudObj.getAll();
			this.categoryList = res.data;
		},
		// 点击添加按钮
		clickAdd() {
			//清空输入框
			// this.categoryItem = {};
			this.showPopup = true;
		},
		// 点击修改按
		updateData(item) {
			this.categoryItem = { ...item };
			this.showPopup = true;
		},
		// 点击删除按钮
		deleteData(id) {
			uni.showModal({
				content: '是否删除该分类?',
				success: async (res) => {
					if (res.confirm) {
						let res = await categoryCloudObj.delete(id);
						await this.getCategory();
						uni.showToast({
							title: '删除成功'
						});
					}
				},
				fail: (err) => {
					console.log(err);
				}
			});
		},

		// 点击确认按钮
		async dialogConfirm() {
			let title;
			if (this.categoryItem._id) {
				let res = await categoryCloudObj.update(this.categoryItem);
				title = '更新成功';
			} else {
				let res = await categoryCloudObj.add(this.categoryItem);
				title = '新增成功';
			}
			// 重新获取数据
			await this.getCategory();

			uni.showToast({
				mask: true,
				title
			});
			this.showPopup = false;
		},
		async closePopup() {
			this.showPopup = false;
			this.categoryItem = {};
		}
	}
};
</script>

<style lang="scss" scoped>
.category {
	height: calc(100vh - 44px);
	padding: 30rpx;
	display: flex;
	flex-direction: column;
	background-color: $theme-back-color;
	.add {
		position: fixed;
		right: 30rpx;
		bottom: 80rpx;
		background-color: #fff;
		box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.07);
		padding: 30rpx;
		border-radius: 50%;
	}
	.row {
		@include flex-box();
		border-bottom: 1px solid $border-color-light;
		padding: 30rpx;
		margin-bottom: 20rpx;
		border-radius: 8rpx;
		box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.07);
		background-color: #fff;
		.left {
			font-size: 34rpx;
			@include flex-box();
			.show_tag {
				margin-left: 20rpx;
			}
		}
		.right {
			@include flex-box();
			.btn {
				margin-left: 30rpx;
			}
		}
	}
	.empty {
		@include flex-box-set();
		flex: 1;
	}

	.categoryChangeForm {
		padding: 80rpx 50rpx;
		border-radius: 20rpx;
		background-color: $theme-back-color;
		.form-item {
			padding: 10rpx 0;
		}
		.switch {
			@include flex-box-set(start);
			margin-right: 20rpx;
			text {
				margin-left: 20rpx;
				color: #888;
			}
		}
		.submit {
			margin-top: 40rpx;
		}
	}
}
</style>
